<!--采购合同-->
<?php echo $this->render('/public/header'); ?>
<?php use yii\helpers\Url; ?>
<script src="https://cdn.bootcss.com/element-ui/1.4.2/index.js"></script>
<link href="https://cdn.bootcss.com/element-ui/1.4.2/theme-default/index.css" rel="stylesheet">
<style>
    input[type=file] {
        display: none
    }
</style>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="main">
    <a href="javascript:window.history.go(-1)" class="btn btn-success">返回</a>
    <div id="purchase" style='margin-top:10px'>
        <div class="col-xs-4">
            <div class="form-group">
                <label for="exampleInputEmail1">供方名称</label>
                <input type="text" class="form-control" v-model="supplier_name">
            </div>
            <div class="form-group">
                <label for="exampleInputPassword1">供方地址</label>
                <input type="text" class="form-control" v-model="supplier_address">
            </div>
            <div class="form-group">
                <label for="exampleInputPassword1">联系电话</label>
                <input type="text" class="form-control" v-model="supplier_tel">
            </div>
            <div class="form-group">
                <label for="exampleInputPassword1">签订地址</label>
                <input type="text" class="form-control" v-model="qianding_address">
            </div>
        </div>
        <div class="col-xs-4 col-xs-offset-2">
            <div class="form-group">
                <label for="exampleInputEmail1">合同编号</label>
                <input type="text" class="form-control" v-model="purchase_num" disabled>
            </div>
            <div class="form-group">
                <label for="exampleInputPassword1">签订日期</label>
                <input type="date" class="form-control" value="<?php echo date('Y-m-d'); ?>" v-model="qianding_date">
            </div>
            <div class="form-group">
                <label for="exampleInputEmail1">采购负责人</label>
                <input type="text" class="form-control" v-model="zh_name">
            </div>
        </div>
        <div class="col-xs-12">
            <table class="table table-borderd">
                <thead>
                <tr>
                    <th>产品品名</th>
                    <th style="width: 100px;">图片</th>
                    <th style="width: 120px;">图片预览</th>
                    <th style="width:400px">品名及规格</th>
                    <th>数量</th>
                    <th>单价</th>
                    <th>总价</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tr v-for="(v,k) in product_list">
                    <td><input style="width:100%" type="text" v-model="v.item"/></td>
                    <td>
                        <div class="source">
                            <el-upload
                                    :name="'img_'+k"
                                    class="upload-demo"
                                    action="/sell/upload_img"
                                    :on-success="handleSuccess"
                            >
                                <el-button size="small" type="primary">点击上传</el-button>
                            </el-upload>
                        </div>
                    </td>
                    <td>
                        <div v-for="(img,k2) in v.img_src"><i class="middleImg icon tu_04" @click="del_img(k,k2)"
                                                              style="float:right"></i><img :src="img"
                                                                                           style="max-width:100px"/>
                        </div>
                    </td>
                    <td>
                        <el-input autosize type="textarea" v-model="v.item_detail"
                        />
                        </el-input>
                    </td>
                    <td><input style="width:80%" type="text" v-model="v.num"/></td>
                    <td>￥<input style="width:80%" type="text" v-model="v.price"/></td>
                    <td>{{((v.num)*(v.price)).toFixed(2)}}</td>
                    <td>
                        <i class="middleImg icon tu_09" @click="del(k)"></i>
                        <i class="middleImg icon tu_10" @click="add(k)"></i>
                    </td>
                </tr>
            </table>
            <br/>
            <br/>
            <div class="col-xs-12">
                <div class="form-inline">
                    <div class="form-group">
                        <label for="exampleInputPassword1">定金(默认百分之30%)</label>
                        <el-input style="width:100px" placeholder='百分比' v-model="deposit_rate" :min="1" :max="10"
                                  label="百分比"></el-input>
                        <el-input type="text" style="width:100px" v-model="deposit"
                                  @change="handleChangeDeposit"></el-input>
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1">运费</label>
                        <input type="text" class="form-control" v-model="ship_fee">
                        <el-switch
                                v-model="ship_fee_show"
                                on-color="#13ce66"
                                off-color="#ff4949">
                        </el-switch>
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1">交货日期</label>
                        <input v-model="delivery_date" type="date" class="form-control">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1">户名</label>
                        <input type="text" class="form-control" v-model="account_name">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1">卡号</label>
                        <input type="text" class="form-control" v-model="account_num">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1">开户行</label>
                        <input type="text" class="form-control" v-model="account_address">
                    </div>

                </div>
                <div class="form-group" style="margin-top:10px">
                    <label for="exampleInputPassword1">验收异议期限&nbsp;&nbsp;&nbsp;</label>
                    <input type="text" class="form-control" v-model="dissent_day">
                </div>
                <div class="form-group" style="margin-top:10px">
                    <label for="exampleInputPassword1">违约责任&nbsp;&nbsp;&nbsp;</label>
                    <input type="text" class="form-control" v-model="remark">
                </div>
            </div>
            <br/>
            <br/>
            <br/>
            <br/>
            <div class="col-lg-12 col-xs-12 col-md-12 col-sm-12" style="margin-top:10px">
                <button type="submit" class="btn btn-default" @click="upload()">提交</button>
            </div>
        </div>
    </div>

</div>
<script type="text/javascript">
    var vm = new Vue({
        el: "#purchase",
        data: {
            invoice: "",
            supplier_name: "",
            supplier_address: "",
            supplier_tel: "",
            qianding_date: "<?php echo date('Y-m-d');?>",
            qianding_address: "",
            purchase_num: "<?php echo $this->params['purchase'];?>",
            product_list: [
                {"item": "", "img_src": [], item_detail: "", num: 1, price: 0, total: 0},
                {"item": "", "img_src": [], item_detail: "", num: 1, price: 0, total: 0},
                {"item": "", "img_src": [], item_detail: "", num: 1, price: 0, total: 0}
            ],
            deposit: "",
            deposit_rate: '',
            total_fee: "",
            delivery_date: "",
            account_name: "",
            account_num: "",
            account_address: "",
            ship_fee: 0,
            ship_fee_show: true,
            dissent_day:
                '对照我方客人质量标准，以样品为标准，在货物进仓时验收，非显而易见的质量瑕疵在客人收货后30天内提出异议',
            remark: "任何一方违反以上约定条款（第三条另有规定除外），须按本合同货款金额的20%支付违约金给对方。如发生经济纠纷, 双方首先应互相协商,协商不成再由合同签订地人民法院解决。",
            zh_name: "<?php echo $this->params['zh_name'];?>"
        },
        watch:
            {
                product_list: {
                    handler(v, v_old) {
                        var fee = 0;
                        for (i in v) {
                            fee += (v[i].num) * (v[i].price);
                        }

                        if (this.deposit_rate >= 0) {
                            this.deposit = fee * this.deposit_rate / 100;
                        } else {
                            this.deposit = fee * 0.3
                        }
                        this.total_fee = fee;
                    },
                    deep: true
                },
                deposit_rate: {
                    handler(v, v_old) {

                        if (this.deposit_rate >= 0) {
                            this.deposit = this.total_fee * this.deposit_rate / 100;
                        } else {
                            this.deposit = this.total_fee * 0.3
                        }
                    },
                }
            },
        methods: {
            handleChangeDeposit: function (v) {
                this.deposit = v;
            },

            handleSuccess: function (res, file, fileList) {
                if (res.code == 1) {
                    var k = res.name.split("_")[1];
                    vm.product_list[k].img_src.push(res.msg);

                }
            },
            del_img: function (listk, imgk) {
                this.product_list[listk].img_src.splice(imgk, 1);
            },
            del: function (i) {
                if (this.product_list.length == 1) {
                    layer.alert("不能再删除了哦");
                    return false;
                }
                this.product_list.splice(i, 1);
            },
            add: function () {
                this.product_list.push({"item": "", "img_src": [], item_detail: "", num: "", price: "", total: ""});
            },
            upload: function () {
                if (!this.qianding_date) {
                    layer.alert("签订日期未填");
                    return false;
                }
                if (!this.delivery_date) {
                    layer.alert("交货日期未填");
                    return false;
                }
                if (!this.account_num) {
                    layer.alert("卡号未填");
                    return false;
                }
                if (!this.account_name) {
                    layer.alert("账号名未填");
                    return false;
                }
                if (!this.product_list[0].item) {
                    layer.alert("产品名未填");
                    return false;
                }
                for (k in this.product_list) {
                    this.product_list[k]['total'] = this.product_list[k]['price'] * this.product_list[k]['num'];
                }
                layer.confirm('确认提交', {}, function () {
                    var str = JSON.stringify(vm.$data);
                    var data = {data: str};
                    var url = "<?php echo Url::to(['sell/upload_purchase']);?>";
                    $.post(url, data, function (res) {
                        if (res.code == 1) {
                            layer.confirm(res.msg, {}, function () {
                                window.location.href = "/sell/purchase_list";
                            })
                        }
                        else {
                            layer.alert(res.msg);
                        }
                    }, 'json')
                })
            }
        }
    });

</script>
<?php echo $this->render('/public/footer'); ?>
